<template>
  <div class="channel-box">
    <div class="channel-list">
      <ul ref="channelList" :style="{ left: -nowLeft + 'px' }">
        <li v-for="(item, index) in list" :key="index" :ref="'li' + index">
          <span class="channel" :class="{ 'channel-active': id === item.id }" @click="selectChannel(item)">
            {{ item.tag_name }}
          </span>
        </li>
      </ul>
    </div>
    <div class="icon-lf">
      <i v-show="showLf" class="el-icon-arrow-left" @click="handleLeft" />
    </div>
    <div class="icon-rt">
      <i v-show="showRt" class="el-icon-arrow-right" @click="handleRight" />
    </div>
  </div>
</template>

<script>
import { getNewChannel, getNewList } from '@/api/news'
export default {
  data() {
    return {
      list: [],
      id: 0,
      fixedWidth: 200,
      nowNum: 0,
      showLf: false,
      showRt: false,
      allWidth: 0,
      nowLeft: 0,
      nowIndex: 0 }
  },
  mounted() {
    this.getChannel().then(res => {
      console.log('channel', res)
      if (res && res.status === 200 && res.data.status === 0) {
        this.list = []
        res.data.result.forEach((element, index) => {
          this.list.push({ 'id': index, 'tag_name': element })
        })
        this.$nextTick(() => {
          this.allWidth = this.$refs.channelList.offsetWidth
          if (this.allWidth > this.fixedWidth) {
            this.showRt = true
          }
          this.selectChannel({ id: 0, tag_name: '头条' })
        })
      }
    })
  },
  methods: {
    // 异步获取频道
    async getChannel() {
      const data = await getNewChannel()
      return data
    },
    // 选择频道,根据频道获取新闻
    selectChannel(item) {
      this.$store.commit('SET_LOADING', true)
      this.$store.commit('SET_CHANNEL', item.tag_name)
      this.$store.commit('SET_START', 0)
      this.getNews(item.tag_name).then(res => {
        console.log('news', res)
        if (res) {
          scrollTo(0, 0)
          this.$store.commit('SET_NEWS', res.data.result.list)
          this.id = item.id
        }
        this.$store.commit('SET_LOADING', false)
      })
    },
    // 异步获取新闻
    async getNews(channel) {
      const data = await getNewList(channel, this.$store.state.news.start, this.$store.state.news.num)
      return data
    },
    // 频道列表左移
    handleLeft() {
      if (this.nowLeft > 0) {
        this.nowNum--
        this.showRt = true
        if (this.nowNum > 0) {
          let nw = 0
          for (let j = this.list.length; j >= 0; j--) {
            if (j < this.nowIndex) {
              nw += this.$refs['li' + j][0].offsetWidth
              if (nw >= this.fixedWidth) {
                nw -= this.$refs['li' + j][0].offsetWidth
                this.nowLeft -= nw
                this.nowIndex = j + 1
                break
              }
            }
          }
        } else {
          this.nowLeft = 0
          this.nowIndex = 0
          this.showLf = false
        }
      }
    },
    // 频道列表右移
    handleRight() {
      if (this.nowLeft + this.fixedWidth < this.allWidth) {
        this.nowNum++
        this.showLf = true
        let nw = 0
        for (let i = 0; i < this.list.length; i++) {
          if (i >= this.nowIndex) {
            nw += this.$refs['li' + i][0].offsetWidth
            if (nw > this.fixedWidth) {
              nw -= this.$refs['li' + i][0].offsetWidth
              this.nowLeft += nw
              this.nowIndex = i
              break
            }
          }
        }
        if (this.nowLeft + this.fixedWidth >= this.allWidth) {
          this.showRt = false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.channel-box {
  width: 100%;
  padding: 0 20px;
  height: 46px;
  position: fixed;
  align-items: center;
  top: 1.2rem;
  font-size: 18px;
  letter-spacing: 3px;
  background-color: rgb(252, 248, 248);
  .channel-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 0.2rem;
    ul {
      transition-duration: 0.3s;
      position: absolute;
      top: 0px;
      left: 0px;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      li {
        white-space: nowrap;
        display: inline-block;
        white-space: nowrap;
        padding: 0 10px;
      }
      li:first-child {
        padding-left: 0;
      }
      li:last-child {
        padding-right: 0;
      }
    }
    .channel {
      cursor: pointer;
      display: inline-block;
      height: 28px;
      line-height: 28px;
      transition: border-color 0.2s;
      &:hover {
        color: #e72521;
      }
    }
    .channel-active {
      color: #e72521;
    }
  }
  .icon-lf {
    cursor: pointer;
    line-height: 30px;
    position: absolute;
    left: 5px;
    top: 6px;
  }
  .icon-rt {
    line-height: 30px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 6px;
  }
}
</style>
